<template>
    <div>
        <el-card shadow="never">
            <div slot="header">动态表单(datePicker)</div>
            <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        </el-card>

        <el-card shadow="never">
            <div slot="header">动态表单(dateTimePicker)</div>
            <DynamicForm :schema="dtSchema" :formData="dtFormData"></DynamicForm>
        </el-card>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from './md/dateTimePicker.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '便捷',
                        widget: 'datePicker',
                        ui: {
                            placeholder: '便捷',
                            pickerOptions: {
                                disabledDate(time) {
                                    return time.getTime() > Date.now();
                                },
                                shortcuts: [{
                                    text: '今天',
                                    onClick(picker) {
                                        picker.$emit('pick', new Date());
                                    }
                                }, {
                                    text: '昨天',
                                    onClick(picker) {
                                        const date = new Date();
                                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                                        picker.$emit('pick', date);
                                    }
                                }, {
                                    text: '一周前',
                                    onClick(picker) {
                                        const date = new Date();
                                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                        picker.$emit('pick', date);
                                    }
                                }]
                            }
                        }
                    },
                    num2: {
                        label: '日',
                        widget: 'datePicker',
                        ui: {
                            type: 'date',
                            placeholder: '日'
                        }
                    },
                    num3: {
                        label: '周',
                        widget: 'datePicker',
                        ui: {
                            type: 'week',
                            format: "yyyy 第 WW 周",
                            placeholder: '周'
                        }
                    },
                    num4: {
                        label: '月',
                        widget: 'datePicker',
                        ui: {
                            type: 'month',
                            placeholder: '月'
                        }
                    },
                    num5: {
                        label: '年',
                        widget: 'datePicker',
                        ui: {
                            type: 'year',
                            placeholder: '年'
                        }
                    },
                    num6: {
                        label: '多个日期',
                        widget: 'datePicker',
                        ui: {
                            type: 'dates',
                            placeholder: '多个日期'
                        }
                    },
                    num7: {
                        label: '范围',
                        widget: 'datePicker',
                        ui: {
                            type: 'daterange',
                            rangeSeparator: "至",
                            startPlaceholder: "开始日期",
                            endPlaceholder: "结束日期",
                            style: 'width: 100%'
                        }
                    },
                    num8: {
                        label: '禁用',
                        widget: 'datePicker',
                        ui: {
                            disabled: true,
                            placeholder: "禁用",
                        }
                    },
                    num9: {
                        label: '只读',
                        widget: 'datePicker',
                        ui: {
                            readonly: true,
                            placeholder: "只读",
                        }
                    }
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 8
                    }
                }
            },
            formData: {},
            dtSchema: {
                properties: {
                    num1: {
                        label: '日期和时间点',
                        widget: 'datePicker',
                        ui: {
                            type: 'datetime',
                            defaultTime: "12:00:00",
                            placeholder: "日期和时间点",
                        }
                    },
                    num2: {
                        label: '日期和时间范围',
                        widget: 'datePicker',
                        ui: {
                            type: 'datetimerange',
                            defaultTime: ['12:00:00', '08:00:00'],
                            rangeSeparator: "至",
                            startPlaceholder: "开始日期",
                            endPlaceholder: "结束日期",
                            style: 'width: 100%'
                        }
                    }
                },
                ui: {
                    labelWidth: '120px',
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 12
                    }
                }
            },
            dtFormData: {}
        }
    }
}
</script>

<style>

</style>